<template>
	<view class="personal">
		<view class="header">
			<!--登录状态-->
			<template v-if="userInfo.nickName">
				<!--<image class="img" :src="userInfo.avatarUrl" mode=""></image>-->
				<text class="nickName">用户名：{{userInfo.nickName}}</text>
				<text class="balance">余额：{{userInfo.balance}}</text>
				<text class="update" @click="update">更改用户身份信息</text>
				<text class="recharge" @click="recharge">充值</text>
				<text class="exit" @click="exit">退出登录</text>
				<text class="logout" @click="logout">注销账号</text>
			</template>
			
			<!--未登录状态-->
			<template v-else>
				<!--<image class="img" src="/static/images/personal/personal.png" mode=""></image>-->
				<text class="login" @click="toLogin">您还未登录，点击登录</text>
			</template>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js';
	
	export default {
		data() {
			return {
				userInfo:{},	//个人信息
			};
		},
		onLoad() {
			
		},
		mounted(){
			//从本地存储里读取数据
			wx.getStorage({
				key:'userInfo',
				success:(res)=>{
					//console.log(res.data+'Here!');
					this.userInfo=JSON.parse(res.data);
				}
			});
		},
		methods:{
			toLogin(){
				wx.reLaunch({
					url:'/pages/login/login'
				})
			},
			update(){
				wx.reLaunch({
					url:'/pages/update/update'
				})
			},
			exit(){
				//清空存储信息
				wx.setStorage({
					key:"userInfo",
					data:""
				})
				wx.reLaunch({
					url:'/pages/personal/personal'
				})
			},
			recharge(){
				wx.reLaunch({
					url:'/pages/recharge/recharge'
				})
			},
			logout(){
				var that=this;
				wx.showModal({
					title:'提示',
					content:'您确定要注销当前账号?',
					success(res){
						if(res.confirm){
							request('/logout?nickName='+that.userInfo.nickName+'&pwd='+that.userInfo.pwd);
							wx.showModal({
								title:'提示',
								content:'注销成功!',
								success(res){
									if(res.confirm){
										that.exit();
										wx.reLaunch({
											url:'/pages/personal/personal'
										})
									}
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="stylus">
	.personal
		.header
			height: 300rpx
			line-height: 200rpx
			background-color: #EED7B5
			display: flex
			.nickName
				margin-left: 70rpx
			.update
				position: absolute
				margin-top: 170rpx
				margin-left: 0
			.exit
				margin-top: 170rpx
				position: absolute
				margin-left: 420rpx
			.login
				margin: 30rpx auto	
			.balance
				margin: 0 auto
				position: absolute
				margin-left: 470rpx
			.recharge
				position: absolute
				margin-top: 170rpx
				margin-left: 330rpx
			.logout
				position: absolute
				margin-top: 170rpx
				margin-left: 590rpx
</style>
